<template>
  <div>
    <h2>我是Header组件</h2>
    <hr />
    <div id="box" @click="divClick"></div>
    <p>当前点击的box的鼠标x轴距离是:{{ fixed(x) }}</p>
    <p>当前点击的box的鼠标y轴距离是:{{ fixed(y) }}</p>
    <p>x和y的和是:{{ total }}</p>
    <hr />

    <button @click="randomDog">随机请求一个狗的照片</button>
    <br />
    <img :src="imgUrl" alt="" width="200" height="200" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Header",
});
</script>

<script setup lang="ts">
import mousePoint from "./hooks/mousePoint";
import randomImg from "./hooks/randomImg";
import fixed from "../../hooks/fixed";
const { x, y, divClick, total } = mousePoint();
const { imgUrl, randomDog } = randomImg();
</script>

<style  scoped >
#box {
  width: 200px;
  height: 200px;
  background-color: red;
}
</style>